﻿<html>
	<head>
		
		<link rel="stylesheet" href="static/structure.css" type="text/css" />
		<link rel="stylesheet" href="static/form.css" type="text/css" />
		<script type="text/javascript" src="static/wufoo.js"></script>
		<script type="text/javascript" src="static/jquery-1.5.1.js"></script>
		<link rel="stylesheet" href="static/validationEngine.jquery.css" type="text/css"/>
        
        <script src="static/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
        </script>
        <script src="static/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
        </script>
		{{css}}
		
		
		<script>
			jQuery(document).ready(function(){
                // binds form submission and fields to the validation engine
                jQuery("#form69").validationEngine();
            });
			$(function() {
				$("#customer").hide();
				$("#developer").hide();
				$("#Save").hide();
			});
			function doSelect(){
				
				//var w = document.form69.Role.text;
				var e = document.getElementById("Role");
				var w = e.options[e.selectedIndex].text;
				//alert(w);
				if (w == "Customer")
				{
					$("#developer").hide();
					$("#customer").show();
					$("#Save").show();
				}
				else if(w == "Developer")
				{
					$("#customer").hide();
					$("#developer").show();
					$("#Save").show();
				}
				else
				{
					$("#customer").hide();
					$("#developer").hide();
					$("#Save").hide();
				}
				
				
			}
		</script>
		
	</head>
		
	<body>
	<div id="page">
		{{header}}
		<div id="content">
		<div id="container">
		<form id="form69" name="form69" class="wufoo topLabel page" autocomplete="off" enctype="multipart/form-data" method="post" action="/RegisterUser">
		<ul>
		<li id="UserName" 		class="">
				<label class="desc" id="title8" for="Field8">
					UserName
				</label>
				<span>
				<input id="UserName" name="UserName" readonly="readonly" type="text" class="field text addr" size="30" value="{{user}}" maxlength="255"  tabindex="9" />
				</span>
			</li>
			<li id="Name" 	class="">
	<label class="desc" id="title0" for="Field0">
		FullName
	</label>
	<span>
		<input id="First" name="First" type="text" class="validate[required] text-input" value="" size="8" tabindex="1" />
		<label for="Field0">First</label>
	</span>
	<span>
		<input id="Last" 	name="Last" type="text" class="validate[required]] text-input" class="field text ln" value="" size="14" 	tabindex="2" />
		<label for="Field1">Last</label>
	</span>
</li>
			<li id="Address" 	class="complex">
				<label class="desc" id="title2" for="Field2">
				Address
				</label>
				<div>
				
				<span class="left">
					<input id="Email" 	name="Email" type="text" class="validate[required]] text-input" class="field text addr" value="" 	tabindex="5" />
				<label for="Field4">Email</label>
				</span>
				<span class="right">
					<input id="Mobile" 	name="Mobile" type="text" class="validate[required,custom[phone]] text-input" class="field text addr"  value="" tabindex="6"/>
				<label for="Field5">Mobile</label>
				</span>
			
				</div>
			</li>
			
			<li id="" 	class="complex">
				<label class="desc" id="title2" for="Field2">
				Roles
				</label>
				
				<select id="Role" name="Role" class="field select addr" tabindex="8" onChange="doSelect()" >
					<option value=0 selected="selected">Select Role</option>
					{% for role in roles  %}
					<option value="{{role.RoleID}}">{{role.RoleName}}</option>
					{% endfor %}
				</select>
				
			</li>
			<p></p>
			<p></p>
			<div id="customer">
				<label class="desc" id="title2" for="Field2">
					Avatar
				</label>
				<span class="left">
				 <input type="file" name="img"/>
				 </span>
			</div>
			
			<p></p>
			
			<div id="developer">
				<li id="Address" 	class="complex">
				<label class="desc" id="title2" for="Field2">
				Address
				</label>
				<div>
				<span class="fulladdr1">
					<input id="Addrees1" name="Addrees1" type="text" class="validate[required]] text-input" class="field text addr" value="" tabindex="3" />
					<label for="Field2">Address 1</label>
				</span>
				<span class="fulladdr2">
					<input id="Addrees2" 	name="Addrees2" type="text" class="validate[required]] text-input" class="field text addr" value="" tabindex="4" />
					<label for="Field3">Address 2</label>
				</span>
				<span class="left">
					<input id="City" 	name="City" type="text" class="validate[required]] text-input" class="field text addr" value="" 	tabindex="5" />
				<label for="Field4">City</label>
				</span>
				<span class="right">
					<input id="Province" 	name="Province" type="text" class="validate[required]] text-input" class="field text addr" value="" tabindex="6"/>
				<label for="Field5">State / Province / Region</label>
				</span>
				<span class="left">
					<input id="Postal" 	name="Postal" type="text" class="validate[required]] text-input" class="field text addr" value="" 	maxlength="15" tabindex="7" 						/>
					<label for="Field6">Postal / Zip Code</label>
				</span>
				<span class="right">
				
				<select id="Country" name="Country" class="field select addr" tabindex="8" >
					{% for country in countrys  %}
					<option value="{{country.CountryID}}">{{country.CountryName}}</option>
					{% endfor %}
				</select>
				
				<label for="Field7">Country</label>
				</span>
				</div>
			</li>
			<li id="foli8" 		class="leftHalf     ">
				<label class="desc" id="title8" for="Field8">
					Company
				</label>
				<span>
				<input id="Company" name="Company" type="text" class="validate[required]] text-input" class="field text medium" size=30 value="" maxlength="255"  tabindex="9" />
				</span>
			</li>
			<li id="foli9" 	class="rightHalf">
				<label class="desc" id="title9" for="Field9">
					Website
				</label>
				<div>
					<input id="Website" name="Website" type="text" class="validate[required]] text-input" class="field text medium" size=30 value="" maxlength="255" tabindex="12" /> 
				</div>
			</li>
			
			<li id="foli10" 	class="">
				<label class="desc" id="title10" for="Field10">
					Paypal Account
				</label>
				<div>
					<input id="PaypalAccount" name="PaypalAccount" type="text" class="validate[required]] text-input" class="field text medium" size=30 value="" maxlength="255" tabindex="12" /> 
				</div>
			</li>
			
			
		</div>

			<li class="buttons ">
			<div>
				<input id="Save" name="Save" class="btTxt submit" type="submit" value="Register"  />
			</div>
			</li>
			

		
		</ul>
	</form>
	</div>
		</div>
		{{footer}}
	</div>
	</body>
</html>